---
title: Styling with CSS Variables
description: Learn how to use CSS variables to create flexible and dynamic themes for c15t components.
lastModified: 2025-08-22
availableIn:
  - framework: 'next'
    url: '/docs/frameworks/next/styling/css-variables'
    title: 'Next.js'
  - framework: 'react'
    url: '/docs/frameworks/react/styling/css-variables'
    title: 'React'
---

CSS Variables are our recommended way to style your components. They provide a powerful way to create dynamic, maintainable themes for components. This approach is particularly useful for dark mode, theming, and responsive design.

## Basic Usage

Each component has a set of predefined CSS variables that you can override:

```tsx
<CookieBanner
  theme={{
    'banner.card': {
      style: {
        '--banner-background-color': 'red',
        '--banner-border-radius': '0px',
      },
    },
  }}
/>
```

## All CSS Variables

| Component | CSS Variables |
|-----------|---------------|
| Cookie Banner | [Open in GitHub](https://github.com/c15t/c15t/blob/main/packages/react/src/components/cookie-banner/theme.ts) |
| Consent Manager Dialog | [Open in GitHub](https://github.com/c15t/c15t/blob/main/packages/react/src/components/consent-manager-dialog/theme.ts) |
| Consent Manager Widget | [Open in GitHub](https://github.com/c15t/c15t/blob/main/packages/react/src/components/consent-manager-widget/theme.ts) |
| Button | [Open in GitHub](https://github.com/c15t/c15t/blob/main/packages/react/src/components/shared/ui/button/button.types.ts) |
| Accordion | [Open in GitHub](https://github.com/c15t/c15t/blob/main/packages/react/src/components/shared/ui/accordion/accordion.types.ts) |
| Switch | [Open in GitHub](https://github.com/c15t/c15t/blob/main/packages/react/src/components/shared/ui/switch/switch.types.ts) |
